<!--
 * @Description: 目录组件
 * @Author: yue
 * @Date: 2022-09-17 11:42:41
 * @LastEditors: yue
 * @LastEditTime: 2022-09-20 15:47:07
-->
<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- NOTE：标题 -->
        <title-tool @search="getTableList" @edit="edit"></title-tool>

        <!-- NOTE：表格 -->
        <table-tool
          :table-list="tableList"
          @disable="disable"
          @edit="edit"
          @del="del"
          @changePage="(page) => change(page, 0)"
          @changePagesize="(pagesize) => change(pagesize, 1)"
        ></table-tool>

        <!-- NOTE：弹层 -->
        <directory-add
          :show-dialog.sync="showDialog"
          :subjects-list="subjectsList"
          :title.sync="title"
          :directory-list.sync="directoryList"
          @editDialog="editDialog"
        ></directory-add>
      </el-card>
    </div>
  </div>
</template>

<script>
// 组件：标题，表格，弹层
import TitleTool from '@/module-hmmm/components/title-tool.vue'
import TableTool from '@/module-hmmm/components/table-tool.vue'
import DirectoryAdd from '@/module-hmmm/components/directorys-add.vue'
// 接口：学科
import { simple } from '@/api/hmmm/subjects.js'
// 接口：目录，改变状态，移除，更新，添加
import {
  list as getTableList,
  changeState,
  remove,
  update,
  add
} from '@/api/hmmm/directorys.js'

export default {
  components: {
    TitleTool,
    TableTool,
    DirectoryAdd
  },
  data() {
    return {
      // 弹层数据
      subjectsList: [], // 学科列表
      showDialog: false, // 弹层显示状态
      title: '新增', // 弹出层标题

      // 主页数据
      filterList: {}, // 筛选数据
      tableList: {}, // 表格数据
      directoryList: {}, // 目录数据

      // 请求数据
      info: {
        page: 1,
        pagesize: 5
      }
    }
  },
  computed: {
    // 页面名
    name() {
      return this.$route.meta.title
    }
  },
  mounted() {
    // 传入
    if (this.$route.query.subjectID) {
      this.info.subjectID = Number(this.$route.query.subjectID)
    }
    this.getTableList()
  },
  methods: {
    // 获取列表数据
    async getTableList(obj) {
      // 处理bug：state为""会被视为0
      if (obj && obj.state === '') {
        delete obj.state
      }
      this.filterList = obj
      try {
        const data = await getTableList({
          ...this.info,
          ...this.filterList
        })
        this.tableList = data.data
      } catch (err) {
        this.$message.error(err.message)
      }
    },

    // 分页
    change(page, type) {
      // 0:page 1:pagesize
      if (type) {
        this.info.page = 1
        this.info.pagesize = page
      } else {
        this.info.page = page
      }
      this.getTableList()
    },

    // 添加/编辑目录
    async edit(row) {
      try {
        if (row) {
          this.title = '修改'
          this.directoryList = row
        }
        this.showDialog = true
        const data = await simple()
        this.subjectsList = data.data
      } catch (err) {
        this.$message.error(err.message)
      }
    },

    // 弹层确认触发
    async editDialog(formDate) {
      try {
        if (this.title === '修改') {
          await update(formDate)
        } else {
          await add(formDate)
        }
        this.$message.success(`${this.title}成功`)
        this.getTableList()
      } catch (err) {
        this.$message.error(err.message)
      } finally {
        this.showDialog = false
      }
    },

    // 状态
    async disable(data) {
      try {
        await changeState(data)
        this.$message.success('修改成功')
        // this.getTableList()
      } catch (err) {
        this.$message.error(err.message)
      }
    },
    // 删除
    async del(row) {
      try {
        await remove(row)
        this.$message.success('删除成功')
        this.getTableList()
      } catch (err) {
        this.$message.error(err.message)
      }
    }
  }
}
</script>

<style scoped></style>
